<template>
  <div class="article">
    <div class="card topsearch">
      <a-input-search
        v-model="search"
        placeholder="输入文字标题关键字"
        enter-button="搜索文章"
        size="large"
        @search="onSearch"
        style="max-width:440px;"
      />
    </div>
    <div class="card tabs" style="padding: 0 40px;">
      <a-tabs @change="callback" v-model="class_id">
        <a-tab-pane v-for="v in classlist" :key="v.id" :tab="v.name">
        </a-tab-pane>
      </a-tabs>
    </div>
    <div v-if="articlelist.length" class="mainarticle">
      <div class="titlelist">
        <div>
          <div v-for="v in articlelist" :key="v.id" @click="getinfo(v.id)">
            <div class="articleli">
              <div class="title line-1">{{ v.title }}</div>
              <a-icon type="right" style="font-size:14px;"/>
            </div>
          </div>
        </div>
      </div>
      <div class="articlemain">
        <div class="title">
          <div style="font-size: 20px;">{{ info.title }}</div>
          <div class="little"><span>{{ info.user }}</span> <span>{{ info.time }}</span></div>
        </div>
        <a-divider style="margin:0"/>
        <div class="mianbox" v-html="info.content">
        </div>
      </div>
    </div>
    <div v-else>
      <a-result status="404" title="暂无数据!">
      </a-result>
    </div>
  </div>
</template>
<script>
  import { getarticleclass, getarticlecontent, getselectarticlecontent } from '@/api/articleApi'

  export default {
    name: 'Article',
    data () {
      return {
        class_id: '',
        search: '',
        classlist: [],
        articlelist: [
          // {
          //   id: 3, // 自增id
          //   class_id: 2, // 分类id
          //   user: '', // 发布用户
          //   title: '测试',
          //   pic: 'https://detail.tmall.com/item.htm?id=608455384750', // 预览图
          //   content: '222222222222', // 内容
          //   time: '2020-12-22 15:45:07', // 时间
          //   num: 0 // 阅读数
          // }
        ],
        flag: true,
        info: {
          id: 0, /// 自增id
          name: '', // 分类
          user: '', // 发布用户
          title: '', // 标题
          pic: '', // 预览图
          content: '', // 内容
          time: '', // 发布时间
          num: 0 // 浏览量
        }
      }
    },
    computed: {},
    created () {
      this.getarticleclass()
    },
    mounted () {

    },
    methods: {
      getinfo (id) {
        getarticlecontent({
          id: id
        }).then(res => {
          // console.log(res)
          this.info = res.data
          this.flag = false
        }).catch(err => {
          console.log(err)
        })
      },
      getarticleclass () {
        getarticleclass().then(res => {
          // console.log(res)
          this.classlist = res.data
          this.class_id = res.data[0].id
          this.getselectarticlecontent()
        }).catch(err => {
          console.log(err)
        })
      },
      getselectarticlecontent () {
        getselectarticlecontent({
          class_id: this.class_id,
          search: this.search
        }).then(res => {
          // console.log(res)
          this.articlelist = res.data.data
          if (this.flag === true) {
            if (this.articlelist.length > 0) {
              console.log('query', this.$route.query)
              if (this.$route.query.id) {
                this.getinfo(this.$route.query.id)
              } else {
                this.getinfo(this.articlelist[0].id)
              }
            } else {
              console.log('暂无数据!')
              this.info = {}
            }
          }
        }).catch(err => {
          console.log(err)
        })
      },
      callback (key) {
        console.log(key)
        this.flag = true
        this.getselectarticlecontent()
      },
      onSearch (value) {
        console.log(value)
        this.flag = true
        this.getselectarticlecontent()
      }
    }
  }
</script>
<style lang='less' scoped>
  .article {
    /deep/ .ant-select-selection {
      border-radius: 4px;
    }

    .topsearch {
      height: 116px;
      display: flex;
      justify-content: center;
      align-items: center;
      /*border-radius: 8px 8px 0 0;*/

      /deep/ .ant-input {
        border-radius: 8px 0 0 8px;
      }

      /deep/ .ant-btn {
        border-radius: 0 8px 8px 0;
      }
    }

    .tabs {
      border-radius: 0 0 4px 4px;
      height: 44px;
      overflow: hidden;
    }

    .mainarticle {
      margin-top: 36px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .titlelist {
        background-color: #fff;
        padding: 10px;
      }

      .articleli {
        width: 254px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #2396F9;
        cursor: pointer;

        .title {
          flex: 1;
        }
      }

      .articlemain {
        background-color: #fff;
        flex: 1;
        padding: 10px;
        margin: 0 34px;

        .title {
          height: 87px;
          padding: 16px 0 17px 27px;

          .little {
            color: #BABDC1;
            font-size: 12px;
          }

        }

        .mianbox {
          padding: 15px;
          min-height: 500px;
        }
      }
    }
  }
</style>
